<template>
  <div class="all">
    <header>
      <div class="div" @click="back()">
        <img src="../../../assets/返回.png" alt="" />
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>人员分组维护</span>
      </div>
      <div class="div">
        <span @click="next()" class="solid">管理人员</span>
      </div>
    </header>
    <!-- 默认分组 -->
    <div class="fold1">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          title="默认分组"
          :name="默认"
          icon="arrow"
          @click.native="arrow(999)"
        >
          <template #icon>
            <van-icon
              :name="icon2[999] == 1 ? 'arrow-down' : 'arrow'"
              style="margin-top: 5px; margin-right: 5px"
            />
          </template>
          <template #right-icon>
            <van-icon
              :name="activeNames == 0 ? '' : ''"
              style="margin-top: 5px; margin-right: 5px"
            />
          </template>
          <!-- 主体展示 -->
          <div class="main">
            <van-field
              v-for="(item2, index) in pgroupPatientList"
              :key="item2.pgroup_id"
              type="text"
              readonly
              :label="item2.NICK_NAME"
              v-show="item2.pgroup_id == null"
            >
              <template #label>
                <img :src="item2.PHOTO" alt="" class="picture" />
                <h style="font-size: 15px; margin-buttom: 5px">{{
                  item2.NICK_NAME
                }}</h>
              </template>
            </van-field>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <!-- 折叠 -->
    <div class="fold">
      <van-radio-group v-model="radio">
        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-for="(item, index) in pgroupList"
            :key="item.id"
            :title="item.pgroup_name"
            :name="item.id"
            icon="arrow"
            @click.native="arrow(item.id)"
          >
            <template #icon>
              <van-icon
                :name="icon2[item.id] == 1 ? 'arrow-down' : 'arrow'"
                style="margin-top: 5px; margin-right: 5px"
              />
            </template>
            <template #right-icon>
              <!-- <van-checkbox
                v-model="groupchecked[item.id]"
                @click="pgroupid(item.id)"
                shape="square"
              ></van-checkbox> -->
              <van-radio :name="item.id" @click="pgroupid(item.id)"></van-radio>
              <van-icon
                :name="activeNames == 0 ? '' : ''"
                style="margin-top: 5px; margin-right: 15px"
              />
            </template>
            <!-- 主体展示 -->
            <div class="main">
              <van-field
                v-for="(item2, index) in pgroupPatientList"
                :key="item2.pgroup_id"
                type="text"
                readonly
                :label="item2.NICK_NAME"
                v-show="item2.pgroup_id == item.id"
              >
                <template #label>
                  <img :src="item2.PHOTO" alt="" class="picture" />
                  <h style="font-size: 15px; margin-buttom: 5px">{{
                    item2.NICK_NAME
                  }}</h>
                </template>
              </van-field>
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-radio-group>
    </div>
    <!-- 占位符 -->
    <div style="height: 100px"></div>

    <!-- button -->
    <div class="btn">
      <div class="div1">
        <button :class="{ b1: blue[0], b2: grey[0] }" @click="add()">
          <h class="text">添加分组</h>
        </button>
      </div>
      <div class="div1">
        <button :class="{ b1: blue[2], b2: grey[2] }">
          <h class="text">编辑组名</h>
        </button>
      </div>
      <div class="div1">
        <button :class="{ b1: blue[1], b2: grey[1] }" @click="del()">
          <h class="text">删除分组</h>
        </button>
      </div>
    </div>

    <!-- save新建分组 -->
    <van-dialog
      v-model="addshow"
      title="添加分组"
      show-cancel-button
      @confirm="save()"
      confirm-button-color="blue"
    >
      <div class="name">
        <input type="text" v-model="pgroup_name" class="nameinput" />
      </div>
    </van-dialog>

    <!-- del删除分组 -->
    <van-dialog
      v-model="delshow"
      title="确定删除所选分组吗？"
      show-cancel-button
      @confirm="delg()"
      confirm-button-color="blue"
    >
    </van-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      team_id: 17,
      activeNames: [''],
      pgroupList: [],
      pgroupPatientList: [],
      icon2: [0], //控制箭头转向
      groupchecked: [],
      flag: false,
      blue: [1, 0, 0],
      grey: [0, 1, 1],
      radio: '1',
      pgroup_name: '',
      addshow: false,
      delshow: false,
    }
  },
  methods: {
    // 返回
    back() {
      this.$router.history.go(-1)
    },
    // 管理分组
    next() {
      this.$router.push({
        path: '/Managegroup',
        query: { team_id: this.team_id },
      })
    },
    // 箭头变向
    arrow(i) {
      this.icon2[i] = !this.icon2[i]
      console.log(this.icon2)
    },
    // getfindTeamPgroupPatient
    // 获取分组数据
    getfindTeamPgroupPatient() {
      this.$http
        .findTeamPgroupPatient({
          team_id: this.team_id,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data == null) {
              this.$toast('暂无数据！')
            } else {
              this.pgroupList = res.data.data.pgroupList
              this.pgroupPatientList = res.data.data.pgroupPatientList
              this.$toast('成功！')
              console.log(this.pgroupPatientList)
            }
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 删除按钮
    del() {
      if (this.flag == false) {
      } else {
        this.delshow = true
      }
    },
    // del删除分组
    delg() {
      this.delPgroup()
      this.getfindTeamPgroupPatient()
      this.blue = [1, 0, 0, 0]
      this.grey = [0, 1, 1, 1]
    },
    // delPgroup
    // 删除分组
    delPgroup() {
      this.$http
        .delPgroup({
          team_id: this.team_id,
          pgroup_id: this.pgroup_id,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('删除分组成功！')
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 删除分组，获取id
    pgroupid(i) {
      this.groupchecked[i] = !this.groupchecked[i]
      this.pgroup_id = i
      // 底部按钮颜色改变
      this.flag = false
      for (var n = 0; n < this.groupchecked.length; n++) {
        if (this.groupchecked[n] == true) {
          this.flag = true
        }
      }
      if (this.flag == false) {
        // 取消单选按钮
        this.radio = 0
        this.blue = [1, 0, 0]
        this.grey = [0, 1, 1]
      } else {
        this.blue = [0, 1, 1]
        this.grey = [1, 0, 0]
      }
      console.log(this.groupchecked)
    },
    // add按钮
    add() {
      if (this.flag == false) {
        this.pgroup_name = ''
        this.addshow = true
      }
    },
    // save新建分组
    save() {
      if (this.pgroup_name.length > 0) {
        this.savePgroup()
        this.getfindTeamPgroupPatient()
      } else {
        this.$toast('请输入分组名称')
      }
    },
    // savePgroup
    // 新建分组
    savePgroup() {
      this.$http
        .savePgroup({
          team_id: this.team_id,
          pgroup_name: this.pgroup_name,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('添加分组成功！')
          } else {
            this.$toast('暂无数据！')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
  mounted() {
    this.getfindTeamPgroupPatient()
  },
}
</script>
<style lang="sss" scoped>
/* header divwai div 是标题布局 */
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}

/* 折叠 */
.picture {
  width: 25px;
  height: 25px;
  border-radius: 20px;
}

/* btn */
.btn {
  width: 100%;
  height: 60px;
  margin-bottom: 50px;
  position: fixed;
  bottom: 0vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.05);
}
.div1 {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.b1 {
  width: 80%;
  height: 70%;
  background: linear-gradient(90deg, #2f9ee5, #2fd6f2);
  border-radius: 5px;
  border: 0px;
}
.b2 {
  width: 80%;
  height: 70%;
  background: #e5e5e5;
  border-radius: 5px;
  border: 0px;
}
.text {
  font-size: 15px;
  font-family: PingFang SC;
  color: #ffffff;
}

/*dialog  */
.name {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nameinput {
  width: 70%;
  margin-top: 3%;
  margin-bottom: 3%;
  border-radius: 5px;
  border-color: #000;
}
</style>